﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DrawCell 绘制单元格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
        
    <style type="text/css">
    .progressbar
    {
        position:relative;background:#bbb;width:100%;height:16px;overflow:hidden;
    }
    .progressbar-percent
    {
        position:absolute;height:18px;background:blue;left:0;top:0px;overflow:hidden;
        z-index:1;
    }
    .progressbar-label
    {
        position:absolute;left:0;top:0;width:100%;font-size:13px;color:White;
        z-index:10;
        text-align:center;
        height:16px;line-height:16px;
    }
    </style>
</head>
<body>
    <h1>DrawCell 绘制单元格 </h1>

<div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;"     
    url="../data/tasks.txt" ondrawcell="onDrawCell" showTreeIcon="true" 
    treeColumn="taskname" idField="UID" parentField="ParentTaskUID" resultAsTree="false"
    
>
    <div property="columns">
        <div type="indexcolumn"></div>
        <div name="taskname" field="Name" width="160">任务名称</div>
        <div field="PercentComplete" width="80">进度</div>
        <div field="Duration" width="60" align="right">工期</div>
        <div field="Start" width="80" dateFormat="yyyy-MM-dd">开始日期</div>
        <div field="Finish" width="80" dateFormat="yyyy-MM-dd">完成日期</div>
    </div>
</div>

      
    
    <script type="text/javascript">
        mini.parse();
        var tree = mini.get("treegrid1");

        function onDrawCell(e){
            var node = e.node,
                column = e.column,
                field = e.field,
                value = e.value;

            //超链接任务
            if (field == "Name") {
                e.cellHtml = '<a href="javascript:alert(\'' + node.UID + '\')" style="color:blue;text-decoration:underline;">' + node.Name + '</a>';
            }
            //格式化日期
            if (field == "Finish") {
                if (mini.isDate(value)) e.cellHtml = mini.formatDate(value, "yyyy年MM月dd日");
            }
            //工期
            if (field == "Duration") {
                e.cellHtml = value + "天";
            }
            //进度
            if (field == "PercentComplete") {
                e.cellHtml = '<div class="progressbar">'
                                + '<div class="progressbar-percent" style="width:' + value + '%;"></div>'
                                + '<div class="progressbar-label">' + value + '%</div>'
                            +'</div>';
            }
        };
    </script>

    
</body>
</html>